<template>
  <a-card title="磁盘监控">
    <a-spin :spinning="spinning">
      <a-row >
        <template v-if="diskInfo && diskInfo.length>0">
          <a-col style="height: 400px" :span="24/diskInfo.length" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
            <a-card :bordered="false" :title="`${item.label} -- ${item.name} `"  :bodyStyle="{height:'360px'}"
                    :headStyle="{'text-align': 'center'}">
              <AkEcharts :option="{
                tooltip: {
                  formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {
                  feature: {
                  }
                },
                series: [
                  {
                    name: item.name,
                    type: 'gauge',
                    detail: {formatter: '{value}%'},
                    data: [{value: item.restPPT, name: '使用率'}]
                  }
                ]
                }"/>
            </a-card>
          </a-col>
        </template>
      </a-row>
      <a-table bordered
               size="middle"
               rowKey="name"
               :columns="columns"
               :dataSource="diskInfo"
               :pagination="false">
        <template slot="akEllipsis" slot-scope="text">
          <AkEllipsis :value="text"></AkEllipsis>
        </template>
      </a-table>
    </a-spin>
  </a-card>
</template>

<script>
  import { getAction } from '../../api/manage'
  import AkEcharts from '../../components/akfh/AkEcharts'
  import AkEllipsis from '../../components/akfh/AkEllipsis'

  export default {
    name: 'DiskMonitoring',
    components:{
      AkEcharts,AkEllipsis
    },
    data() {
      return {
        description: '磁盘监控',
        //数据集
        diskInfo:[],
        spinning:false,
        columns:[
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: "磁盘名称",
            dataIndex: "name",
            scopedSlots: { customRender: "akEllipsis" }
          },
          {
            title: "标签",
            align: "center",
            dataIndex: "label",
            scopedSlots: { customRender: "akEllipsis" }
          },
          {
            title: "挂载点",
            align: "center",
            dataIndex: "mount",
            scopedSlots: { customRender: "akEllipsis" }
          },
          {
            title: "格式",
            align: "center",
            dataIndex: "type",
            scopedSlots: { customRender: "akEllipsis" }
          },
          {
            title: "磁盘uuid",
            align: "center",
            dataIndex: "uuid",
            scopedSlots: { customRender: "akEllipsis" }
          },
          {
            title: "可用大小",
            align: "center",
            dataIndex: "displayFreeSpace",
            scopedSlots: { customRender: "akEllipsis" }
          },
          {
            title: "总大小",
            align: "center",
            dataIndex: "displayTotalSpace",
            scopedSlots: { customRender: "akEllipsis" }
          },


        ],
        url:{
          queryDiskInfo:'/monitor/fileSystem/getInfo',
        }
      }
    },
    mounted() {
      this.spinning=true;
      getAction(this.url.queryDiskInfo).then((res)=>{
        if(res.success){
          for(var i=0;i<res.result.fileStores.length;i++){
            res.result.fileStores[i].restPPT =
              (res.result.fileStores[i].usableSpace*100/res.result.fileStores[i].totalSpace).toFixed(1);
          }
          this.diskInfo = res.result.fileStores;
          this.spinning = false;
        }
      })
    }
  }
</script>

<style scoped>

</style>